<template>
	<view class="body" @click="goFollowersDetail">
		<view class="top">
			<up-avatar :src="personData.data?.avatar" shape="circle" size="50"> </up-avatar>
			<view class="right">
				<span class="text1">{{personData.data?.user_name}}</span>
				<view class="Signature">
					<span class="text">{{personData.data?.signature}}</span>&emsp;<span>{{data?.time}}</span>
				</view>
			</view>
			<view class="but">
				<button size="mini" type="primary" style="color:white;backgroundColor:#d81e06;border-radius: 50rpx;"
					@click.stop="clickFollow(personData.data?.user_id)">{{personData.concern}}</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" name="user" setup>
	import { defineProps } from 'vue'
	import { PostConcern } from '../../apis/user'
	const personData = defineProps({
		data: Object,
		concern: String,
	})
	const clickFollow = async function (e : string) {
		const data = { "user_id": e }
		console.log('点击了');
		try {
			const res = await PostConcern(data);
			console.log(res);
		} catch (error) {
			// 错误处理逻辑
			console.error('An error occurred while executing Captcha function:', error);
		}
	}
	const goFollowersDetail = function () {
		console.log(22222);
		uni.navigateTo({
			url: `/pages/followerDetail/followerDetail`
		})
	}
</script>

<style lang="scss" scoped>
	.top {
		position: relative;
		padding: 20upx 40upx 20upx 30upx;

		// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		.right {
			top: 8upx;
			left: 125upx;
			position: absolute;
			margin-left: 30upx;
			margin-top: 20upx;

			.text1 {
				font-size: 36upx;
			}

			.text {
				font-size: 26upx;
				/* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
				width: 11em;
				overflow: hidden;
				/* 显示省略符号来代表被修剪的文本。 */
				text-overflow: ellipsis;
				/* 文本不换行 */
				white-space: nowrap;
			}

		}

		.but {
			top: 50upx;
			right: 40upx;
			position: absolute;
		}
	}
</style>